<template>
  <div class="error-page">
    <div class="container-floud">
      <div class="col-xs-12 ground-color text-center">
        <div class="container-error-404">
          <div class="clip">
            <div class="shadow">
              <span ref="thirdDigit" class="digit thirdDigit"></span>
            </div>
          </div>
          <div class="clip">
            <div class="shadow">
              <span ref="secondDigit" class="digit secondDigit"></span>
            </div>
          </div>
          <div class="clip">
            <div class="shadow">
              <span ref="firstDigit" class="digit firstDigit"></span>
            </div>
          </div>
          <div class="msg">OH!<span class="triangle"></span></div>
        </div>
        <h2 class="h1">Sorry! Page not found</h2>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue'

const animationTime = 30
let i = 0
let loop1 = null
let loop2 = null
let loop3 = null

const firstDigit = ref(null)
const secondDigit = ref(null)
const thirdDigit = ref(null)

const randomNum = () => Math.floor(Math.random() * 9) + 1

const startAnimation = () => {
  loop3 = setInterval(() => {
    if (i > 40) {
      clearInterval(loop3)
      if (thirdDigit.value) thirdDigit.value.textContent = '4'
    } else if (thirdDigit.value) {
      thirdDigit.value.textContent = randomNum().toString()
    }
    i++
  }, animationTime)

  loop2 = setInterval(() => {
    if (i > 80) {
      clearInterval(loop2)
      if (secondDigit.value) secondDigit.value.textContent = '0'
    } else if (secondDigit.value) {
      secondDigit.value.textContent = randomNum().toString()
    }
    i++
  }, animationTime)

  loop1 = setInterval(() => {
    if (i > 100) {
      clearInterval(loop1)
      if (firstDigit.value) firstDigit.value.textContent = '4'
    } else if (firstDigit.value) {
      firstDigit.value.textContent = randomNum().toString()
    }
    i++
  }, animationTime)
}

onMounted(startAnimation)

onBeforeUnmount(() => {
  clearInterval(loop1)
  clearInterval(loop2)
  clearInterval(loop3)
})
</script>

<style lang="scss" scoped>
@import url('https://fonts.googleapis.com/css?family=Anton|Passion+One|PT+Sans+Caption');

$primary-color: #1B7A55;
$secondary-color: #535353;
$text-color: #a2a2a2;

* {
  font-family: 'PT Sans Caption', sans-serif, 'arial', 'Times New Roman';
}

.error-page {
  .clip {
    display: inline-block;
    transform: skew(-45deg);

    .shadow {
      height: 180px;
      overflow: hidden;

      @for $i from 1 through 3 {
        &:nth-of-type(#{$i}) {
          width: if($i ==2, 130px, 250px);
        }
      }
    }

    &:nth-of-type(2) .shadow {
      position: relative;
      box-shadow: inset 20px 0 20px -15px rgba(150, 150, 150, 0.8),
        20px 0 20px -15px rgba(150, 150, 150, 0.8);
    }

    @for $i from 1 through 3 {
      &:nth-of-type(#{$i}) .digit {
        @if $i ==1 {
          right: -20%;
        }

        @else if $i ==2 {
          left: -10%;
        }

        @else {
          left: -20%;
        }
      }
    }

    &:not(:nth-of-type(2)) .shadow::after {
      content: '';
      position: absolute;
      bottom: 0;
      height: 100%;
      width: 10px;
      background: linear-gradient(90deg, transparent, rgba(173, 173, 173, 0.8), transparent);
      border-radius: 50%;
      right: if(&=='.clip:nth-of-type(3) .shadow', -8px, 8px);
    }
  }

  .digit {
    position: relative;
    top: 8%;
    color: white;
    background: $primary-color;
    border-radius: 50%;
    display: inline-block;
    transform: skew(45deg);
    width: 150px;
    height: 150px;
    line-height: 150px;
    font-size: 120px;
    font-weight: bold;
  }

  h2 {
    color: $text-color;
    font-size: 32px;
    font-weight: bold;
    padding-bottom: 20px;
  }

  .msg {
    position: relative;
    z-index: 9999;
    top: -190px;
    left: 30%;
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 32px;
    background: $secondary-color;
    color: $text-color;
    border-radius: 50%;
    font-style: italic;
  }

  .triangle {
    position: absolute;
    z-index: 999;
    transform: rotate(45deg);
    top: 70%;
    right: 0;
    border-left: 20px solid $secondary-color;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
  }

  .container-error-404 {
    margin-top: 10%;
    position: relative;
    height: 250px;
    padding-top: 40px;
  }

  @media (max-width: 767px) {
    .clip .shadow {
      height: 100px;
    }

    .digit {
      width: 80px;
      height: 80px;
      line-height: 80px;
      font-size: 52px;
    }

    h2 {
      font-size: 24px;
    }

    .msg {
      top: -110px;
      left: 15%;
      width: 40px;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
    }

    .triangle {
      border-left: 10px solid $secondary-color;
      border-top-width: 8px;
      border-bottom-width: 8px;
      right: -3%;
    }

    .container-error-404 {
      height: 150px;
    }
  }
}

.ground-color {
  background: white;
}

.text-center {
  text-align: center;
}

.padding-top {
  padding-top: 10px;
}
</style>